<template>
	<el-dialog
		title="修改订单"
		:close-on-click-modal="false"
		:visible.sync="dialogVisible"
	>
		<el-form ref="form" :model="form" label-width="80px">
			<el-form-item label="城市" required>
				<el-cascader
					v-model="form.selectdCity"
					:options="form.city"
					:props="{ expandTrigger: 'hover' }"
					@change="handleChange"
				></el-cascader>
			</el-form-item>
			<el-form-item label="详细地址" required>
				<el-input v-model="form.dir"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
export default {
	methods: {
		handleChange(value) {
			console.log(value)
		},
	},
	data() {
		return {
			dialogVisible: false,
			form: {
				city: [],
				dir: '',
				selectdCity: '',
			},
		}
	},
	props: {
		visible: {
			type: Boolean,
			default: false,
		},
	},
	watch: {
		visible(val) {
			this.dialogVisible = val
			if (val && this.form.city.length === 0) {
				// 新一代浏览器内置的请求对象，将来替换ajax，默认底层是promise封装的
				fetch('/citydata.js')
					.then((data) => data.text())
					.then((res) => {
						this.form.city = eval(res)
						console.log(this.form.city)
					})
			}
		},
		dialogVisible(val) {
			this.$emit('update:visible', val)
		},
	},
}
</script>

<style>
</style>